<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html>
  <head>
    <title>forget</title>
    <meta charset="utf-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link th:href="@{https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900i}" rel="stylesheet" />
    <link th:href="@{https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i}" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" th:href="@{/mall/revolution/css/settings.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/mall/revolution/css/layers.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/mall/revolution/css/navigation.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/mall/css/main.css}" />

  </head>
  <body class="animsition">
  <div class="checkout" id="page">
      <nav id="menu">
          <ul>
              <li><a th:href="@{/fore/index.html}">Home</a></li>
              <li><a th:href="@{/fore/shop.html}">Shop List</a></li>
              <li><a th:href="@{/fore/shop-detail.html}">Shop Detail</a><li>
              <li><a th:href="@{/fore/wish-list.html}">Wishlist</a></li>
              <li><a th:href="@{/fore/shop-cart.html}">Shop Cart</a></li>
              <li><a th:href="@{/fore/check-out.html}">Checkout</a></li>
          </ul>
      </nav>
      <div th:replace="@{/include/fore_header}::header"></div>
      <section class="sub-header shop-detail-1">
          <img class="rellax bg-overlay" th:src="@{/mall/images/sub-header/013.jpg}" alt="">
          <div class="overlay-call-to-action"></div>
          <h3 class="heading-style-3">忘记密码</h3>
      </section>

      <section class="boxed-sm" >

          <div class="container">
          <div class="woocommerce">
                  <div class="row">
                      <div class="col-lg-2"></div>
                      <div class="col-lg-8">
                          <div class="progress">
                              <div id="progress" class="progress-bar progress-bar-striped" role="progressbar" style="width: 33.3%;background-color:#97AE75 " aria-valuenow="33.3" aria-valuemin="0" aria-valuemax="100" ></div>
                          </div>
                      </div>
                  </div>
          </div>
              <div id="searchCustomer" class="woocommerce">

                  <div class="row">
                      <form  id="searchForm" class="woocommerce-checkout" role="form" >
<!--                          <h4>登录</h4>-->
                          <div class="row">
                              <div class="col-md-4"></div>
                              <div class="col-md-4">
                                  <div class="form-group organic-form no-radius">
                                      <label>用户名</label>
                                      <input class="form-control" type="text" name="customerName">
                                  </div>
                              </div>

                          </div>
                          <div class="row">
                              <div class="col-md-4"></div>
                              <div class="col-md-4">
                                  <div class="form-group organic-form no-radius">
                                      <label>邮箱</label>
                                      <input class="form-control" type="email" name="customerEmail">
                                  </div>
                              </div>
                          </div>

                          <div class="row">
                              <div class="col-md-4"></div>
                              <div class="col-md-4">
                                  <div class="woocommerce-account-fields">

                                      <div class="desc widget-link">
                                                  <input id="search" class="place_order btn btn-brand-ghost pill " name="woocommerce_checkout_place_order" value="发送验证码" data-value="Login" style="float: right;" type="button">
                                      </div>

                                  </div>

                              </div>
                          </div>

                      </form>
                  </div>
              </div>
              <div id="InputVerification" class="woocommerce">
                        <div class="row">
                            <form id="verificationForm" class="woocommerce-checkout" role="form" >
      <!--                          <h4>登录</h4>-->
                                <div class="row">
                                    <div class="col-md-4"></div>
                                    <div class="col-md-4">
                                        <div class="form-group organic-form no-radius">
                                            <label>验证码</label>
                                            <input class="form-control" type="text" name="verification">
                                        </div>
                                    </div>

                                </div>
                                <div class="row">
                                    <div class="col-md-4"></div>
                                    <div class="col-md-4">
                                        <div class="woocommerce-account-fields">

                                            <div class="desc widget-link">
                                                        <input id="checkButton" class="place_order btn btn-brand-ghost pill " name="woocommerce_checkout_place_order" value="下一步" data-value="Login" style="float: right;" type="button">
                                            </div>

                                        </div>

                                    </div>
                                </div>

                            </form>
                        </div>
                    </div>
              <div id="changePWD" class="woocommerce">
                                    <div class="woocommerce-info-wrapper">
                                        <div class="row">

                                        </div>
                                    </div>
                                    <div class="row">
                                        <form id="confirmform" class="woocommerce-checkout" role="form" >

                                            <div class="row">
                                                <div class="col-md-4"></div>
                                                <div class="col-md-4">
                                                    <div class="form-group organic-form no-radius">
                                                        <label>新密码</label>
                                                        <input id="newpwd" class="form-control" placeholder="新密码" type="password" name="newPassword">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-4"></div>
                                                <div class="col-md-4">
                                                    <div class="form-group organic-form no-radius">
                                                        <label>确认密码</label>
                                                        <input id="confirmpwd" class="form-control" placeholder="确认密码" type="password" name="confirm">
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-md-4"></div>
                                                <div class="col-md-4">
                                                    <div class="woocommerce-account-fields">
                                                        <div class="desc widget-link">
                                                            <input id="confirmButton" type="button" class="place_order btn btn-brand-ghost pill "  data-value="Change" style="float: right;"  value="确认修改"/>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
          </div>
      </section>

  </div>
  <div th:replace="@{/include/fore_footer}::footer"></div>
  <script th:src="@{/mall/js/library/jquery.min.js}"></script>
  <script th:src="@{/mall/js/library/bootstrap.min.js}"></script>
  <script th:src="@{/mall/js/function-check-viewport.js}"></script>
  <script th:src="@{/mall/js/library/slick.min.js}"></script>
  <script th:src="@{/mall/js/library/select2.full.min.js}"></script>
  <script th:src="@{/mall/js/library/imagesloaded.pkgd.min.js}"></script>
  <script th:src="@{/mall/js/library/jquery.mmenu.all.min.js}"></script>
  <script th:src="@{/mall/js/library/rellax.min.js}"></script>
  <script th:src="@{/mall/js/library/isotope.pkgd.min.js}"></script>
  <script th:src="@{/mall/js/library/bootstrap-notify.min.js}"></script>
  <script th:src="@{/mall/js/library/bootstrap-slider.js}"></script>
  <script th:src="@{/mall/js/library/in-view.min.js}"></script>
  <script th:src="@{/mall/js/library/countUp.js}"></script>
  <script th:src="@{/mall/js/library/animsition.min.js}"></script>
  <script th:src="@{/mall/js/global.js}"></script>
  <script th:src="@{/mall/js/config-mm-menu.js}"></script>
  <script>
       $(document).ready(function () {
           $("#searchCustomer").show();
           $("#InputVerification").hide();
           $("#changePWD").hide();
           $("#search").click(function() {
               $.ajax({
                    url:'/customer/findEmail',
                    type:'post',
                    data:$("#searchForm").serialize(),
                    success:function (data){
                        if(data==0){
                           $("#searchCustomer").hide();
                           $("#InputVerification").show();
                           $("#changePWD").hide();
                           $("#progress").attr({
                                "aria-valuenow":"66.7",
                                "style":"width: 66.7%;background-color:#97AE75"
                           });
                        } else if(data==1){
                            alert("该用户不存在");
                         }
                        else if(data == 2){
                            alert("邮箱错误");
                        }else {
                            alert("发送失败");
                        }
                        $("#searchForm :input").not(":button, :submit, :reset, :hidden, :checkbox, :radio").val("");
                        $("#searchForm :input").removeAttr("checked").remove("selected");
                    }
               });
               return false;
           });
           $("#checkButton").click(function() {
                $.ajax({
                    url:'/customer/check',
                    type:'post',
                    data:$("#verificationForm").serialize(),
                    success:function (data){
                        if(data == 0){
                            $("#searchCustomer").hide();
                            $("#InputVerification").hide();
                            $("#changePWD").show();
                            $("#progress").attr({
                                "aria-valuenow":"100",
                                "style":"width: 100%;background-color:#97AE75"
                            });
                        }else {
                            alert("验证码错误");
                        }
                        $("#searchForm :input").not(":button, :submit, :reset, :hidden, :checkbox, :radio").val("");
                        $("#searchForm :input").removeAttr("checked").remove("selected");
                    }
                });
                return false;
           });
           $("#confirmButton").click(function() {
               if($("#confirmpwd").val() == $("#newpwd").val()){
                   $.ajax({
                        url:'/customer/forget',
                        type:'post',
                        data:$("#confirmform").serialize(),
                        success:function (data){
                            if(data == 0){
                                window.location.href="/fore/login";
                            }else if(data == 1){
                                alert("两次密码不一样");
                            }
                            else {
                                alert("服务器故障");
                            }
                            $("#searchForm :input").not(":button, :submit, :reset, :hidden, :checkbox, :radio").val("");
                            $("#searchForm :input").removeAttr("checked").remove("selected");
                        }
                   });
               }
               else {
                   alert("两次密码不一致");
               }

           });
           return false;
       });

  </script>
  </body>
</html>

